<template>
    <div ref="container" class="weather-container">
        <div class="weather-item">
            <div class="city">{{  cityInfo.city || '' }}</div>
        </div>
        <div class="weather-item">
            <div class="tq">{{  weatherInfo.weather || ''  }}</div>
            <img v-if="iconIndex" style="width:2.14rem;" :src="iconMaps[iconIndex]" />
        </div>
        <div class="weather-item">
            <div class="temp">{{ ( weatherInfo.temperature || '' ) + ' ℃' }}</div>
        </div>
        
    </div>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import request from '@/utils/axios.ts';
    import Icon1 from '@/assets/rain.png';
    import Icon2 from '@/assets/sun.png';
    const cityInfo = ref({});
    const weatherInfo = ref({});
    const iconIndex = ref();
    const iconMaps = {
        1:Icon1,
        2:Icon2
    }
    // adcode: "441300"
    // city: "惠州市"
    // humidity: "85"
    // humidity_float: "85.0"
    // province: "广东"
    // reporttime: "2025-04-11 21:00:39"
    // temperature: "24"
    // temperature_float: "24.0"
    // weather: "多云"
    // winddirection: "东南"
    // windpower: "≤3"
    async function getLocation(){
        const key = '52e3abfbda24e5729d300064556c9693';
        const { data } = await request({
	    	url: 'https://restapi.amap.com/v3/ip',
	    	method: 'get',
	        params:{ key }
	    })
        cityInfo.value = data;
        if ( data.info === "OK" ){
            const data2 = await request({
                url: 'https://restapi.amap.com/v3/weather/weatherInfo',
	        	method: 'get',
	            params:{ key, city:data.adcode }
            })
            if ( data2.data.info === "OK" ) {
                if ( data2.data.lives && data2.data.lives.length ) {
                    weatherInfo.value = data2.data.lives[0];
                    iconIndex.value = weatherInfo.value.weather.includes('雨') ? 1 : 2;
                }
            }
        }
        
    }
    onMounted(()=>{
        getLocation();
    })
</script>
<style lang="scss" scoped>
    .weather-container {
        display:flex;
        align-items: center;
        font-size:var(--baseFontSize);
        .weather-item {
            color:#fff;
            display:flex;
            align-items: center;
            padding:0 var(--sPadding);
            position:relative;
        }
        .weather-item::after {
            content:'';
            width:1px;
            height:var(--mPadding);
            position:absolute;
            right:0;
            top:50%;
            transform:translateY(-50%);
            background:#067DD6;
            opacity:0.5;
        }
        .weather-item:last-child::after {
            display:none;
        }
        .tq {
            font-size:var(--12FontSize);
            color:#EFC739;
            margin-right:var(--sPadding);
        }
        .temp {
            font-size:var(--18FontSize);
            color:#15F1FD;
        }
    }
</style>